<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      /*****mask，box(=小图的宽),big,bImg的宽不能随便设置，需按照比例，否则mask覆盖区域与显示出的大图区域不符********/
      /*** mask的宽 / box的宽 = big的宽 / bImg的宽 ***/
      * {
        padding: 0;
        margin: 0;
      }
      #box {
        width: 400px;
        height: 225px;
        margin: 100px;
        /* border: 1px solid #ccc; */
        position: relative;
      }
      #small {
        position: relative;
      }
      #small img {
        width: 400px;
        height: 100%;
      }
      #mask {
        width: 200px;
        height: 120px;
        background: rgba(255, 255, 0, 0.4);
        position: absolute;
        top: 0;
        left: 0;
        cursor: move;
        display: none;
      }
      #big {
        position: absolute;
        top: 0;
        left: 560px;
        width: 400px;
        height: 225px;
        overflow: hidden;
        display: none;
        border: 1px solid #ccc;
      }
      #big img {
        width: 800px;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <div id="small">
        <img src="../images/01.jpg" alt="" />
        <div id="mask"></div>
        <!--放大区域-->
      </div>
      <div id="big">
        <img id="b-img" src="../images/02.jpg" alt="" />
      </div>
    </div>
    <script>
      var box = document.getElementById("box");
      var small = document.getElementById("small");
      var mask = document.getElementById("mask");
      var big = document.getElementById("big");
      var bImg = document.getElementById("b-img");

      //鼠标进入small，显示mask+big的div
      box.onmouseover = function (e) {
        mask.style.display = "block";
        big.style.display = "block";
      };

      //鼠标离开small，隐藏mask+big
      small.onmouseout = function () {
        mask.style.display = "none";
        big.style.display = "none";
      };

      //鼠标移动，mask也动
      small.onmousemove = function (e) {
        //鼠标此时的可视区域的横坐标和纵坐标
        //主要是设置鼠标在遮挡层的中间显示    100是margin
        var x = e.clientX - mask.offsetWidth / 2 - 100;
        var y = e.clientY - mask.offsetHeight / 2 - 100;

        //设置mask的边界限制，不让它超出small这个div
        //横坐标的最小值
        x = x < 0 ? 0 : x;
        //纵坐标的最小值
        y = y < 0 ? 0 : y;
        //横坐标最大值
        x =
          x > small.offsetWidth - mask.offsetWidth
            ? small.offsetWidth - mask.offsetWidth
            : x;
        //纵坐标最大值
        y =
          y > small.offsetHeight - mask.offsetHeight
            ? small.offsetHeight - mask.offsetHeight
            : y;

        mask.style.left = x + "px";
        mask.style.top = y + "px";

        //大图对应移动（鼠标右移，大图左移）
        //计算大小图之间的比例
        //mask的移动距离（x） / 大图的移动距离（?） = mask的横向最大移动距离（small.offsetWidth - mask.offsetWidth） / 大图的横向最大移动距离（bImg.offsetWidth - big.offsetWidth）

        //大图移动的距离
        var bX =
          (x * (bImg.offsetWidth - big.offsetWidth)) /
          (small.offsetWidth - mask.offsetWidth);
        var bY =
          (y * (bImg.offsetWidth - big.offsetWidth)) /
          (small.offsetWidth - mask.offsetWidth);

        //大图的移动（方向相反，故取负值）
        bImg.style.marginLeft = -bX + "px";
        bImg.style.marginTop = -bY + "px";
      };
    </script>
  </body>
</html>
